import React, { Component } from 'react';
class DemoFormInput extends Component {
  // constructor(props) {
  //   super(props);
  // }
  state = {
    title: '',//input
    desc: '',//文本域
    sex: '1', // 性别
    city: 'beijing',//城市
    data: [
      {
        label: '苹果',
        name: '苹果',
        checked: true
      },
      {
        label: '香蕉',
        name: '香蕉',
        checked: false
      },
      {
        label: '西瓜',
        name: '西瓜',
        checked: false
      }
    ]
  }

  // 提交表单信息
  submitData = (e) => {
    e.preventDefault()
  }

  //  input
  handleMsg = (e) => {
    console.log(e.target.value);
    this.setState({
      title: e.target.value
    })
  }

  // 文本域
  handleDesc = (e) => {
    this.setState({
      desc: e.target.value
    })
  }

  // 复选框
  handleInput = (e, index) => {
    console.log(e, index);
    if (e.target.type === 'checkbox') {
      this.state.data[index].checked = !this.state.data[index].checked
    }
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
    console.log('checkbox', this.state.data, this.state)
  }

  // 性别
  handleSex = (e) => {
    this.setState({
      sex: e.target.value
    })
  }

  // 城市
  handleSelectCity = (e) => {
    console.log('city', e.target.value, this.state)
    this.setState({
      city: e.target.value
    })
  }

  render () {
    return (<>
      <form onSubmit={this.submitData}>
        <h2>05.案例-form表单组件相关集合</h2>
        <div className='item'>
          <h3>5.1 input</h3>
          title:{this.state.title}
          <input type="text" placeholder='请输入活动名称' value={this.state.title} onChange={this.handleMsg} />
        </div>
        <div>
          <h3>5.2 textarea</h3>
          desc:{this.state.desc}
          <textarea name="" id="" cols="30" rows="10" placeholder='请输入描述内容' value={this.state.desc} onChange={this.handleDesc}></textarea>
        </div>
        <div>
          <h3>5.3 checkbox</h3>
          喜欢的水果：
          {
            this.state.data.map((item, index) => {
              return <>
                <label key={index}>
                  <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.handleInput(e, index)} />{item.label}
                </label>
              </>
            })
          }
        </div>
        <div className='item'>
          <h3>5.4 radio</h3>
          性别：
          <label>
            <input type="radio" value='1' checked={this.state.sex === '1'} onChange={this.handleSex} /> 男
          </label>
          <label>
            <input type="radio" value='2' checked={this.state.sex === '2'} onChange={this.handleSex} /> 女
          </label>
        </div>
        <div className='item'>
          <h3>5.5 select</h3>
          选择城市：
          <select value={this.state.city} onChange={this.handleSelectCity}>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
          </select>
        </div>
      </form>
    </>);
  }
}

export default DemoFormInput;